<template>
  <div class="container">
    <Header ref="HeaderRef" :businessData="state" @submit="getData" />
    <Steps :businessData="state" @submit="getData" />
    <el-card shadow="never">
      <el-tabs v-model="active.name" class="tabs_box">
        <el-tab-pane label="基本信息" name="first">
          <Basic ref="BasicRef" />
        </el-tab-pane>
        <el-tab-pane :label="state.product_num ? `关联产品（${state.product_num}）` : '关联产品'" name="second">
          <Product :productList="state.product_list" />
        </el-tab-pane>
        <el-tab-pane :label="state.order_num ? `关联订单（${state.order_num}）` : '关联订单'" name="third1">
          <Order :orderList="state.order_list" @submit="getData" />
        </el-tab-pane>
        <el-tab-pane label="聊天记录" name="third2">
          <ChatIndex ref="ChatIndexRef" />
        </el-tab-pane>
        <el-tab-pane label="跟进记录" name="third3">
          <FollowRecord :businessData="state" :follow="state.follow" :predictTime="state.predict_time" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import Header from './components/Header.vue'
  import Steps from './components/Steps.vue'
  import Basic from './components/Basic.vue'
  import Product from './components/Product.vue'
  import Order from './components/Order.vue'
  import ChatIndex from './chatHistoryComponents/ChatIndex.vue'
  import FollowRecord from './components/FollowRecord.vue'
  import { businessDetail } from '@/api/salesleads/salesmanagement/business'
  import { useRoute } from 'vue-router'
  import { ref, reactive, onMounted } from 'vue'
  const ChatIndexRef = ref<any>(null)
  const route = useRoute()
  const state = ref<any>({
    stage_list: []
  })
  const active = reactive({
    name: 'first'
  })
  const HeaderRef = ref<any>(null)
  const BasicRef = ref<any>(null)
  const getData = () => {
    businessDetail({ business_id: route.query.id }).then((res: any) => {
      console.log('详情数据', res)
      state.value = res
      HeaderRef.value.onState(res)
      BasicRef.value.onState(res)
    })
  }
  onMounted(() => {
    getData()
    ChatIndexRef.value.onBeforeInit(route.query.id)
  })
</script>

<style lang="scss" scoped>
  .el-card {
    margin-top: 16px;
    :deep(.el-card__body) {
      padding: 20px 24px;
    }
  }
  .tabs_box {
    :deep(.el-tabs__item) {
      color: #969696;
    }
    :deep(.is-active) {
      font-weight: 600;
      color: #ff6b00;
    }
  }
</style>
